export default {
basic_examples: `<template>
	<view class="">
		<view class="dev-ruler-all"
			:style="{'background':background,'border': \`1rpx solid \${borderColor}\`,'border-radius':\`\${radius}rpx\`}">
			<scroll-view scroll-with-animation class="dev-ruler-box" scroll-x="true" :scroll-left="scrollLeft">
				<view class="weigh-both-sides"
					:style="{'width':width=='100%'?'50%':\`$\{width/2}rpx\`,'height':\`\${height}rpx\`}"></view>
				<view v-if="listNum" :class="index%[quarterInterval] ==0?'dev-scale-height':'dev-scale'"
					v-for="(item,index) in listNum" :key="index"
					:style="{'width':\`\${index==activateIndex?activeScaleThickness:scaleThickness}px\`,'margin-right':\`\${scaleInterval}px\`,
					'background':index==activateIndex || index==activateIndex-1 || index==activateIndex+1?activeColor:inactiveColor,'height':\`\${index==activateIndex?activeScaleHeight:inactiveScaleHeight}rpx\`}">
					<view class="dev-degree-of-engraving"
						:style="{'width':\`\${quarterInterval*scaleThickness+scaleInterval*quarterInterval}px\`,
						'left':\`-\${(quarterInterval*scaleThickness+scaleInterval*quarterInterval)/2}px\`,'font-size':\`\${fontSize}rpx\`,'color':index==activateIndex?activateTextColor:inactiveTextColor}"
						v-show="index%[quarterInterval] ==0">
						{{decimal?(index*scaleValue*Math.pow(0.1, decimal)+minNum).toFixed(decimal):(index+minNum)*scaleValue}}
					</view>
				</view>
				<view class="weigh-both-sides"
					:style="{'width':width=='100%'?'50%':\`\${width/2}rpx\`,'height':\`\${height}rpx\`}"></view>
			</scroll-view>
			<!-- 两边留白 -->
			<view class="dev-left-blank"
				:style="{'width':\`\${bothSidesWidth}rpx\`,'height':\`\${height+10}rpx\`,'background':bothSidesColor}"></view>
			<view class="dev-right-blank"
				:style="{'width':\`\${bothSidesWidth}rpx\`,'height':\`\${height+10}rpx\`,'background':bothSidesColor}"></view>
			<view class="dev-left-blank"
				:style="{'width':width=='100%'?'100%':\`\${width}rpx\`,'height':\`\${height+10}rpx\`}" @touchmove="move"
				@touchstart="start"></view>
		</view>

	</view>

</template>

<script>
	/******************************************* 娄渊洋
	 * 刻度尺
	 * @property {String,Number} 'width' 刻度尺宽度 默认宽度为'100%'
	 * @property {String,Number} 'height' 刻度尺高度 默认高度为90rpx
	 * @property {String} 'background' 刻度尺背景颜色
	 * @property {String,Number} 'radius' 刻度尺边框圆角
	 * @property {String,Number} 'both-sides-width' 刻度尺两边遮盖刻度盒子宽度
	 * @property {String} 'both-sides-color' 刻度尺两边遮盖刻度盒子颜色
	 * @property {Number} 'min-num' 刻度尺最小值
	 * @property {Number} 'max-num' 刻度尺最大值
	 * @property {Number} 'initial-value' 刻度尺初始值
	 * @property {Number} 'decimal' 刻度尺显示几位小数，0不显示，1一位小数，2两位小数 依次类推
	 * @property {Number} 'quarter-interval' 刻度数间隔几个刻度尺显示，默认10个
	 * @property {Number} 'active-scale-thickness' 激活的刻度线粗细 默认2px
	 * @property {Number} 'scale-thickness' 未激活刻度线粗细 默认2px
	 * @property {String,Number} 'active-scale-height' 激活刻度线高度
	 * @property {String,Number} 'inactive-scale-height' 未激活刻度线高度
	 * @property {Number} 'scale-interval' 刻度线之间的距离 默认10px
	 * @property {String,Number} 'font-size' 刻度值文字号大小
	 * @property {String} 'activate-text-color' 激活的刻度值文本颜色
	 * @property {String} 'inactive-text-color' 未激活的刻度值文本颜色
	 * @property {String} 'active-color' 激活的刻度线颜色
	 * @property {String} 'inactive-color' 未激活的刻度线颜色
	 * @property {Number} 'rolling-speed' 刻度尺滑动速度，值越大滑动越慢，最小值为1
	 * @property {Number} 'scale-value' 刻度线每格代表的值，默认刻度值为1；当为1位小数时刻度值为0.1；2位小数时刻度值为0.01依次类推
	 */
	export default {
		name: 'dev-ruler', //刻度尺
		props: {
			//宽度
			width: {
				type: [String, Number],
				default: '100%', //rpx
			},
			// 高度
			height: {
				type: [String, Number],
				default: 90, //rpx
			},
			//背景颜色
			background: {
				type: String,
				default: '#FFFFFF', //rpx
			},
			//边框颜色
			borderColor: {
				type: String,
				default: '#979797', //rpx
			},
			//边框圆角
			radius: {
				type: [String, Number],
				default: 90, //rpx
			},
			//两边留白
			bothSidesWidth: {
				type: [String, Number],
				default: 40, //rpx
			},
			//两边留白颜色
			bothSidesColor: {
				type: String,
				default: '#FFFFFF',
			},
			//最小值
			minNum: {
				type: Number,
				default: 0
			},
			//最大值
			maxNum: {
				type: Number,
				default: 100
			},
			//初始值
			initialValue: {
				type: Number,
				default: 0
			},
			//显示几位小数
			decimal: {
				type: Number,
				default: 0 //0默认不显示小数 
			},
			//刻数间隔几个显示
			quarterInterval: {
				type: Number,
				default: 10,
			},
			//激活的刻度粗细
			activeScaleThickness: {
				type:Number,
				default: 2, //px
			},
			// 刻度粗细
			scaleThickness: {
				type: Number,
				default: 2, //px
			},
			//激活刻度高度
			activeScaleHeight: {
				type: [String, Number],
				default: 40, //rpx
			},
			//未激活刻度高度
			inactiveScaleHeight: {
				type: [String, Number],
				default: 30, //rpx
			},
			//刻度之间距离
			scaleInterval: {
				type: Number,
				default: 10, //px
			},
			//刻度数字大小
			fontSize: {
				type: [String, Number],
				default: 22, //rpx
			},
			//激活文字颜色
			activateTextColor: {
				type: String,
				default: '#2EA7E0',
			},
			//未激活文字颜色
			inactiveTextColor: {
				type: String,
				default: '#000000',
			},
			//激活的刻度颜色
			activeColor: {
				type: String,
				default: '#2EA7E0',
			},
			//未激活的刻度颜色
			inactiveColor: {
				type: String,
				default: '#979797',
			},
			//滚动速度
			rollingSpeed: {
				type: Number,
				default: 10, // 数值越小滚动越快，最小值为1
			},
			//刻度值 
			scaleValue: {
				type: Number,
				default: 1, // 默认刻度值为1 当为1位小数时刻度值为0.1；2位小数时刻度值为0.01依次类推
			}

		},
		data() {
			return {
				listNum: 0, //尺子循环次数
				currentValue: this.initialValue,
				scrollLeft: 0,
				activateIndex: 0,
				loadOnce: false, //是否加载完一次
				scaleWidth: this.scaleThickness + this.scaleInterval, //尺寸一个刻度的宽度（刻度线宽度+刻度间隔宽度）
				startData: {
					clientX: '',
					clientY: '',
				},

			}
		},
		computed: {
			//尺子间隔宽度
			getScaleWidth() {
				this.scaleWidth = this.scaleThickness + this.scaleInterval;
			},
			//计算循环次数
			numberOfCycles() {
				if (this.decimal) {
					return this.listNum = (((this.maxNum - this.minNum) * Math.pow(10, this.decimal)) / this.scaleValue)
						.toFixed(this.decimal) * 1 + 1
				} else {
					return this.listNum = (this.maxNum - this.minNum) / this.scaleValue + 1
				}
			},
			//初次计算尺子位置
			getScrollLeft() {
				if (this.loadOnce) return
				this.loadOnce = true;
				if (this.decimal) {
					if (this.initialValue < this.minNum) {
						this.scrollLeft = 0;
						this.activateIndex = 0;
						this.currentValue = this.minNum;
						this.$emit('input', 0)
					} else if (this.initialValue > this.maxNum) {
						this.scrollLeft = ((this.maxNum - this.minNum) * Math.pow(10, this.decimal) / this.scaleValue).toFixed() * this.scaleWidth;
						this.activateIndex = this.maxNum - this.minNum;
						this.currentValue = this.maxNum;
					} else {
						this.scrollLeft = ((this.initialValue - this.minNum) * Math.pow(10, this.decimal) / this.scaleValue).toFixed() * this.scaleWidth;
						this.activateIndex = ((this.initialValue - this.minNum) * Math.pow(10, this.decimal) / this.scaleValue).toFixed() * 1
					}
				} else {
					if (this.initialValue < this.minNum) {
						this.scrollLeft = 0;
						this.activateIndex = 0;
						this.currentValue = this.minNum;
						this.$emit('input', 0)
					} else if (this.initialValue > this.maxNum) {
						this.scrollLeft = ((this.maxNum - this.minNum) * this.scaleWidth) / this.scaleValue;
						this.activateIndex = (this.maxNum - this.minNum) / this.scaleValue;
						this.currentValue = this.maxNum;
					} else {
						this.scrollLeft = ((this.initialValue - this.minNum) * this.scaleWidth) / this.scaleValue;
						this.activateIndex = (this.initialValue - this.minNum) / this.scaleValue;
					}
				}
			}
		},
		methods: {
			//@touchstart 触摸开始
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标         
			},
			//@touchmove触摸移动
			move(event) {
				let _this = this;
				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
				let data = touch.clientX - this.startData.clientX;
				//向左移动 加数字
				if (touch.clientX < this.startData.clientX) {
					if (data < \`-\${this.rollingSpeed}\` && this.activateIndex < this.listNum - 1) {
						this.startData.clientX = touch.clientX;
						this.scrollLeft = this.scrollLeft + this.scaleWidth;
						this.activateIndex = this.activateIndex + 1;
						if (this.decimal) {
							this.currentValue = (this.currentValue + this.scaleValue * Math.pow(0.1, this.decimal)).toFixed(this.decimal) * 1
							this.$emit('input', this.currentValue)
						} else {
							this.currentValue = this.currentValue + this.scaleValue
							this.$emit('input', this.currentValue)
						}
					}
				}
				//向右移动 减数字
				if (touch.clientX > this.startData.clientX && this.activateIndex > 0) {
					this.isLeft = false;
					if (data > this.rollingSpeed) {
						this.startData.clientX = touch.clientX;
						this.scrollLeft = this.scrollLeft - this.scaleWidth;
						this.activateIndex = this.activateIndex - 1;
						if (this.decimal) {
							this.currentValue = (this.currentValue - this.scaleValue * Math.pow(0.1, this.decimal)).toFixed(this.decimal) * 1
							this.$emit('input', this.currentValue)
						} else {
							this.currentValue = this.currentValue - this.scaleValue
							this.$emit('input', this.currentValue)
						}
					}
				}
			},
		}

	}
</script>

<style lang="scss">
	.dev-ruler-all {
		overflow: hidden;
		position: relative;

		.dev-left-blank {
			position: absolute;
			top: 0;
			left: 0;
		}

		.dev-right-blank {
			position: absolute;
			top: 0;
			right: 0;
		}
	}


	.dev-ruler-box {
		white-space: nowrap;

		.weigh-both-sides {
			display: inline-block;
		}

		.dev-scale {
			display: inline-block;
			position: relative;

			.dev-degree-of-engraving {
				position: absolute;
				text-align: center;
			}
		}

		.dev-scale-height {
			display: inline-block;
			position: relative;

			.dev-degree-of-engraving {
				text-align: center;
				position: absolute;
				top: -40rpx;
			}
		}

	}
</style>
`,
svg:`// svg 封装
let svgData = {
  rightArrow: {
    svgCode: '<svg t="1642833835746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2434" width="200" height="200"><path d="M534.826667 935.466667a47.36 47.36 0 0 1-66.986667-66.773334L835.413333 501.333333 467.84 133.973333a47.36 47.36 0 1 1 66.986667-66.773333l400.64 400.64a47.36 47.36 0 0 1 0 66.986667z" fill="#8a8a8a" p-id="2435"></path></svg>',
    initialColor: '#8a8a8a', //当前svg本身自带的颜色
  },
  listIcon: {
    svgCode: '<svg t="1642848640214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4180" width="200" height="200"><path d="M187.392 70.656q28.672 0 48.64 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t47.616-19.456l54.272 0zM889.856 70.656q27.648 0 47.616 19.456t19.968 48.128l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.128t48.64-19.456l437.248 0zM187.392 389.12q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t47.616-19.968l54.272 0zM889.856 389.12q27.648 0 47.616 19.968t19.968 48.64l0 52.224q0 27.648-19.968 47.616t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-47.616l0-52.224q0-28.672 19.968-48.64t48.64-19.968l437.248 0zM187.392 708.608q28.672 0 48.64 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-54.272 0q-27.648 0-47.616-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t47.616-19.968l54.272 0zM889.856 708.608q27.648 0 47.616 19.968t19.968 47.616l0 52.224q0 28.672-19.968 48.64t-47.616 19.968l-437.248 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-27.648 19.968-47.616t48.64-19.968l437.248 0z" p-id="4181" fill="#1296db"></path></svg>',
    initialColor: '#1296db', //当前svg本身自带的颜色
  },
  svgImage:{
    svgCode:'<svg t="1643342497703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8452" width="200" height="200"><path d="M725.333333 128H298.666667C181.034667 128 85.333333 223.701333 85.333333 341.333333v341.333334c0 117.632 95.701333 213.333333 213.333334 213.333333h426.666666c117.632 0 213.333333-95.701333 213.333334-213.333333V341.333333c0-117.632-95.701333-213.333333-213.333334-213.333333zM298.666667 213.333333h426.666666c70.570667 0 128 57.429333 128 128v195.669334l-152.874666-152.874667a85.632 85.632 0 0 0-120.917334 0L384 579.669333l-24.874667-24.874666a85.632 85.632 0 0 0-120.917333 0L170.666667 622.336V341.333333c0-70.570667 57.429333-128 128-128z m-21.333334 170.666667a64 64 0 1 1 128.042667 0.042667A64 64 0 0 1 277.333333 384z" fill="#40A9FF" p-id="8453"></path><path d="M579.541333 384.128a85.632 85.632 0 0 1 120.917334 0l78.677333 78.677333L345.898667 896H298.666667a213.12 213.12 0 0 1-169.941334-84.48l243.584-243.541333 11.690667 11.690666z m219.52-242.986667a214.058667 214.058667 0 0 1 136.704 165.034667L853.333333 388.522667V341.333333a128.170667 128.170667 0 0 0-120.490666-127.786666l-5.973334-0.170667z" fill="#53B1FF" p-id="8454"></path><path d="M170.666667 467.84v154.453333l67.541333-67.498666a85.632 85.632 0 0 1 120.917333 0l13.141334 13.141333-243.541334 243.541333a212.181333 212.181333 0 0 1-43.178666-119.552L85.333333 682.666667v-129.493334l85.333334-85.333333zM341.333333 320a64 64 0 1 1-0.042666 128.042667A64 64 0 0 1 341.333333 320zM725.333333 128c25.898667 0 50.773333 4.650667 73.728 13.141333L726.826667 213.333333H425.216l85.333333-85.333333z" fill="#66BAFF" p-id="8455"></path><path d="M510.506667 128l-85.333334 85.333333H298.666667a128.170667 128.170667 0 0 0-127.786667 120.490667L170.666667 341.333333v126.506667l-85.333334 85.333333V341.333333a213.589333 213.589333 0 0 1 204.074667-213.12L298.666667 128h211.84z" fill="#8CCBFF" p-id="8456"></path></svg>',
    initialColor: '#8CCBFF', //当前svg本身自带的颜色
  }
}

export default svgData
`,
default_use:`<template>
  <view>
    <dev-svg-image></dev-svg-image>
  </view>
</template>`,
svg_code_use:`<template>
  <view>
    <dev-svg-image mode="svg" :svg-code="svgCode"></dev-svg-image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        svgCode:'<svg t="1645347205172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="1339" fill="#2c2c2c" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>'
      }
    }
  }
</script>`,
svg_name_use:`<template>
  <view>
    <dev-svg-image mode="svg" svg-name="svgImage"></dev-svg-image>
  </view>
</template>`,
svg_name_color:`<template>
  <view>
    <dev-svg-image mode="svg" svg-name="rightArrow" modify-color="#0081FF"></dev-svg-image>
  </view>
</template>`,
svg_code_color:`<template>
  <view>
    <dev-svg-image mode="svg" :svg-code="svgCode" initial-color="#2c2c2c" modify-color="#0081FF"></dev-svg-image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        svgCode:'<svg t="1645347205172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M947.701961 623.435294l-694.713725 0q-11.043137 0-23.090196 6.023529t-22.588235 18.070588-17.066667 28.611765-6.52549 37.647059 5.521569 39.152941 14.556863 32.12549 22.086275 22.086275 28.109804 8.031373l693.709804 0q-12.047059-12.047059-21.082353-27.105882-8.031373-13.05098-14.556863-31.121569t-6.52549-41.160784q0-26.101961 6.52549-43.168627t14.556863-28.109804q9.035294-12.047059 21.082353-21.082353zM947.701961 897.505882q0 17.066667-22.086275 17.066667l-733.866667 0q-34.133333 0-57.223529-14.054902t-37.647059-38.65098-20.580392-58.729412-6.023529-73.286275l0-582.27451q0-77.301961 41.160784-111.937255t117.458824-34.635294l34.133333 0 68.266667 0 93.364706 0q51.2 0 104.909804-0.501961t104.909804-0.501961l94.368627 0 70.27451 0 35.137255 0q28.109804 0 49.192157 11.545098t35.137255 32.12549 21.584314 48.690196 7.529412 60.235294l0 406.588235q-191.74902 0-345.34902-1.003922l-128.501961 0q-64.25098 0-114.94902-0.501961t-83.827451-0.501961l-37.145098 0q-21.082353 0-41.160784 12.54902t-36.141176 34.133333-26.101961 50.196078-10.039216 59.733333q0 38.14902 10.541176 68.768627t27.607843 51.701961 37.647059 32.627451 40.658824 11.545098l685.678431 0q8.031373 0 14.556863 4.517647t6.52549 14.556863zM515.011765 0l0 388.517647 77.301961-108.423529 76.298039 108.423529 0-388.517647-153.6 0z" p-id="1339" fill="#2c2c2c" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>'
      }
    }
  }
</script>`


}
